<template>
    <div class="yorha-small-button">
        <div class="inner-box">
            <div class="img-con">
                <img src="../../assets/icons/point.png">
            </div>
            <button>
                <span class="little-box"></span>
                <span class="text">
                    <slot></slot>
                </span>
            </button>
        </div>
    </div>
</template>

<script>
export default {
    name:'YorhaSmallButton'
}
</script>

<style lang="less" scoped>
@import "../../style";
.yorha-small-button {
    width: 160px;
    height: 36px;
    display: inline-block;
    &:hover {
        &>.inner-box {
            &>.img-con {
                &>img {
                    opacity: 1;
                }
            }
            &>button {
                box-shadow: 2px 2px 0 @yellow;
                &::before {
                    width: 120px;
                }
                &>.little-box {
                    background: @yellowWhite;
                }
                &>.text {
                    color: @yellowWhite;
                }
            }
        }

    }
    &>.inner-box {
        display: flex;
        align-items: center;
        justify-content: center;
        &>.img-con {
            width: 40px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            &>img {
                width: 60%;
                height: 70%;
                opacity: 0;
            }
        }
        &>button {
            width: 120px;
            height: 36px;
            border: none;
            outline: none;
            display: flex;
            padding: 0;
            background: @darkYellow;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                height: 36px;
                width: 0;
                background: @gray;
                z-index: 0;
                transition: width 200ms ease-in-out;
            }
            &>.little-box {
                margin: 8px;
                width: 20px;
                height: 20px;
                background: @gray;
                z-index: 1;
            }
            &>.text {
                margin: 8px 0;
                color: @gray;
                font-size: medium;
                z-index: 1;
            }
        }
    }

}
</style>